<template>
    <div class="song-list">
      <ul>
        <li class="item" v-for="song in songs">
          <div class="content">
            <h1 class="name">{{song.name}}</h1>
            <p class="desc">{{getDes(song)}}</p>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "song-list",
        props:{
          songs:{
            type:Array,
            default:[]
          }
        },
      methods:{
          getDes(song){
            return `${song.singer}·${song.album}`
          }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '~common/stylus/variable.styl'
  @import '~common/stylus/mixin.styl'
  .song-list
    .item
      display flex
      height 64px
      font-size $font-size-medium
      align-items center
      box-sizing border-box
      .content
        flex 1
        line-height 20px
        overflow hidden
        .name
          no-wrap()
          color $color-text
        .desc
          no-wrap()
          color $color-text-d
          margin-top 4px

</style>
